// 定义断点尺寸
$breakpoints: (
    'phone': (320px, 480px),
    'piad': (768px, 1024px),
    'pc': (1025px)
);

/**
 * 响应式媒体查询
*/
@mixin respond-to($phonestyle) {
    $breakpoints-style: map-get($breakpoints, $phonestyle);

    @if type-of($breakpoints-style)=='list' {
        $min: nth($breakpoints-style, 1);
        $max: nth($breakpoints-style, 2);
        @media only screen and (min-width: $min) and (max-width: $max) {
            @content;
        }
    }

    @else {
        @media only screen and (min-width: $breakpoints-style) {
            @content;
        }
    }
}


// 未简化写法
// @mixin respond-to($phonestyle) {

//     // map-get 从对应键值对中获取数据
//     $breakpoints-style: map-get($breakpoints, $phonestyle);

//     @if $phonestyle =='phone' {
//         @media only screen and (max-width: 767px) {
//             @content;
//         }
//     }

//     @else if $phonestyle =='piad' {
//         @media only screen and (min-width: 768px) and (max-width: 1024px) {
//             @content;
//         }
//     }

//     @else if $phonestyle =='pc' {
//         @media only screen and (min-width: 1025px) {
//             @content;
//         }
//     }
// }